<template>
  <div class="backups-container">
    <div class="header">
      <div class="header-left">
        <h2>备份任务管理</h2>
        <el-tag type="info" class="task-count">共 {{ filteredTasks.length }} 个任务</el-tag>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="showCreateDialog" icon="el-icon-plus">创建备份任务</el-button>
        <el-button @click="refreshTasks" icon="el-icon-refresh">刷新</el-button>
      </div>
    </div>
    
    <el-card class="filter-card" shadow="never">
      <div class="filter-content">
        <el-form :inline="true" :model="filterForm" class="filter-form">
          <el-form-item label="任务名称">
            <el-input v-model="filterForm.taskName" placeholder="请输入任务名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="filterForm.status" placeholder="请选择状态" clearable>
              <el-option label="待执行" value="PENDING"></el-option>
              <el-option label="执行中" value="RUNNING"></el-option>
              <el-option label="已完成" value="COMPLETED"></el-option>
              <el-option label="失败" value="FAILED"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="applyFilter" icon="el-icon-search">搜索</el-button>
            <el-button @click="resetFilter" icon="el-icon-refresh-left">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    
    <el-table 
      :data="paginatedTasks" 
      style="width: 100%" 
      border
      class="backups-table"
      v-loading="loading"
    >
      <el-table-column prop="taskName" label="任务名称" width="160" show-overflow-tooltip></el-table-column>
      <el-table-column prop="sourceServerName" label="源服务器" width="140" show-overflow-tooltip></el-table-column>
      <el-table-column prop="sourcePath" label="源路径" width="160" show-overflow-tooltip></el-table-column>
      <el-table-column prop="targetType" label="目标类型" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.targetType === 'SERVER' ? 'primary' : 'success'">
            {{ scope.row.targetType === 'SERVER' ? '服务器' : scope.row.targetType }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="targetServerName" label="目标服务器" width="140" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.targetType === 'SERVER'">{{ scope.row.targetServerName }}</span>
          <span v-else>{{ scope.row.targetBucket }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="targetPath" label="目标路径" width="160" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.targetType === 'SERVER'">{{ scope.row.targetPath }}</span>
          <span v-else>{{ scope.row.targetBucket }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="scheduleType" label="调度类型" width="120">
        <template slot-scope="scope">
          {{ getScheduleTypeText(scope.row.scheduleType) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="110">
        <template slot-scope="scope">
          <el-tag :type="getStatusTagType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="progress" label="进度" width="120">
        <template slot-scope="scope">
          <el-progress
            :percentage="scope.row.progress"
            :status="getProgressStatus(scope.row.status)"
            :stroke-width="10"
            text-inside
          ></el-progress>
          <div class="progress-text">{{ scope.row.progress }}%</div>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="180">
        <template slot-scope="scope">
          {{ formatDateTime(scope.row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="executeTask(scope.row)"
            :disabled="scope.row.status !== 'PENDING'"
            icon="el-icon-video-play"
          >
            执行
          </el-button>
          <el-button 
            size="mini" 
            @click="showDetails(scope.row)"
            icon="el-icon-view"
          >
            详情
          </el-button>
          <el-button 
            size="mini" 
            type="danger" 
            @click="handleDelete(scope.row)"
            icon="el-icon-delete"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filteredTasks.length"
      >
      </el-pagination>
    </div>
    
    <!-- 创建/编辑备份任务对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="700px"
      @close="handleDialogClose"
      class="backup-dialog"
    >
      <el-form
        :model="taskForm"
        :rules="taskFormRules"
        ref="taskForm"
        label-width="120px"
        class="backup-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="任务名称" prop="taskName">
              <el-input v-model="taskForm.taskName" placeholder="请输入任务名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="源服务器" prop="sourceServerId">
              <el-select 
                v-model="taskForm.sourceServerId" 
                placeholder="请选择源服务器" 
                style="width: 100%;"
                @change="handleSourceServerChange"
              >
                <el-option
                  v-for="server in serverList"
                  :key="server.id"
                  :label="server.name"
                  :value="server.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="源路径" prop="sourcePath">
          <el-input v-model="taskForm.sourcePath" placeholder="请输入源路径"></el-input>
        </el-form-item>
        
        <el-form-item label="目标类型" prop="targetType">
          <el-select v-model="taskForm.targetType" placeholder="请选择目标类型" style="width: 100%;" @change="handleTargetTypeChange">
            <el-option label="服务器" value="SERVER"></el-option>
            <el-option label="Amazon S3" value="S3"></el-option>
            <el-option label="阿里云OSS" value="OSS"></el-option>
            <el-option label="腾讯云COS" value="COS"></el-option>
          </el-select>
        </el-form-item>
        
        <!-- 服务器目标 -->
        <div v-if="taskForm.targetType === 'SERVER'">
          <el-form-item label="目标服务器" prop="targetServerId">
            <el-select 
              v-model="taskForm.targetServerId" 
              placeholder="请选择目标服务器" 
              style="width: 100%;"
              @change="handleTargetServerChange"
            >
              <el-option
                v-for="server in serverList"
                :key="server.id"
                :label="server.name"
                :value="server.id"
              ></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="目标路径" prop="targetPath">
            <el-input v-model="taskForm.targetPath" placeholder="请输入目标路径"></el-input>
          </el-form-item>
        </div>
        
        <!-- 对象存储目标 -->
        <div v-else-if="taskForm.targetType">
          <el-form-item label="存储桶名称" prop="targetBucket">
            <el-input v-model="taskForm.targetBucket" placeholder="请输入存储桶名称"></el-input>
          </el-form-item>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="Access Key" prop="targetAccessKey">
                <el-input v-model="taskForm.targetAccessKey" placeholder="请输入Access Key"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Secret Key" prop="targetSecretKey">
                <el-input v-model="taskForm.targetSecretKey" type="password" placeholder="请输入Secret Key" show-password></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="Endpoint" prop="targetEndpoint">
            <el-input v-model="taskForm.targetEndpoint" placeholder="请输入Endpoint"></el-input>
          </el-form-item>
        </div>
        
        <el-form-item label="调度类型" prop="scheduleType">
          <el-select v-model="taskForm.scheduleType" placeholder="请选择调度类型" style="width: 100%;">
            <el-option label="一次性" value="ONCE"></el-option>
            <el-option label="每天" value="DAILY"></el-option>
            <el-option label="每周" value="WEEKLY"></el-option>
            <el-option label="每月" value="MONTHLY"></el-option>
            <el-option label="自定义(CRON)" value="CRON"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item v-if="taskForm.scheduleType === 'CRON'" label="CRON表达式" prop="scheduleCron">
          <el-input v-model="taskForm.scheduleCron" placeholder="请输入CRON表达式"></el-input>
        </el-form-item>
        
        <el-form-item label="描述" prop="description">
          <el-input 
            v-model="taskForm.description" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入任务描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>
    
    <!-- 任务详情对话框 -->
    <el-dialog
      title="备份任务详情"
      :visible.sync="detailDialogVisible"
      width="600px"
      class="detail-dialog"
    >
      <el-form label-width="120px" class="detail-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="任务名称：">
              <span>{{ currentTask.taskName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目标类型：">
              <el-tag :type="currentTask.targetType === 'SERVER' ? 'primary' : 'success'">
                {{ currentTask.targetType === 'SERVER' ? '服务器' : currentTask.targetType }}
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="源服务器：">
              <span>{{ currentTask.sourceServerName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="源路径：">
              <span>{{ currentTask.sourcePath }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="目标服务器：">
              <span v-if="currentTask.targetType === 'SERVER'">{{ currentTask.targetServerName }}</span>
              <span v-else>{{ currentTask.targetBucket }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目标路径：">
              <span v-if="currentTask.targetType === 'SERVER'">{{ currentTask.targetPath }}</span>
              <span v-else>{{ currentTask.targetBucket }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="调度类型：">
              <span>{{ getScheduleTypeText(currentTask.scheduleType) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态：">
              <el-tag :type="getStatusTagType(currentTask.status)">
                {{ getStatusText(currentTask.status) }}
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="进度：">
              <el-progress
                :percentage="currentTask.progress"
                :status="getProgressStatus(currentTask.status)"
                :stroke-width="12"
                text-inside
              ></el-progress>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下次运行：">
              <span>{{ currentTask.nextRunTime ? formatDateTime(currentTask.nextRunTime) : '无' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="创建时间：">
          <span>{{ formatDateTime(currentTask.createdAt) }}</span>
        </el-form-item>
        
        <el-form-item label="开始时间：" v-if="currentTask.lastRunTime">
          <span>{{ formatDateTime(currentTask.lastRunTime) }}</span>
        </el-form-item>
        
        <el-form-item label="错误信息：" v-if="currentTask.errorMessage">
          <el-alert
            :title="currentTask.errorMessage"
            type="error"
            show-icon
            :closable="false"
          >
          </el-alert>
        </el-form-item>
        
        <el-form-item label="描述：">
          <span>{{ currentTask.description }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import moment from 'moment'

export default {
  name: 'Backups',
  data() {
    return {
      dialogVisible: false,
      detailDialogVisible: false,
      dialogTitle: '创建备份任务',
      isEdit: false,
      loading: false,
      currentTask: {},
      filterForm: {
        taskName: '',
        status: ''
      },
      pagination: {
        currentPage: 1,
        pageSize: 20
      },
      taskForm: {
        id: null,
        taskName: '',
        sourceServerId: null,
        sourceServerName: '',
        sourcePath: '',
        targetType: 'SERVER',
        targetServerId: null,
        targetServerName: '',
        targetPath: '',
        targetBucket: '',
        targetAccessKey: '',
        targetSecretKey: '',
        targetEndpoint: '',
        scheduleType: 'ONCE',
        scheduleCron: '',
        description: ''
      },
      taskFormRules: {
        taskName: [
          { required: true, message: '请输入任务名称', trigger: 'blur' }
        ],
        sourceServerId: [
          { required: true, message: '请选择源服务器', trigger: 'change' }
        ],
        sourcePath: [
          { required: true, message: '请输入源路径', trigger: 'blur' }
        ],
        targetType: [
          { required: true, message: '请选择目标类型', trigger: 'change' }
        ],
        targetServerId: [
          { required: true, message: '请选择目标服务器', trigger: 'change', validator: this.validateTargetServer }
        ],
        targetBucket: [
          { required: true, message: '请输入存储桶名称', trigger: 'blur', validator: this.validateTargetBucket }
        ],
        targetAccessKey: [
          { required: true, message: '请输入Access Key', trigger: 'blur', validator: this.validateTargetAccessKey }
        ],
        targetSecretKey: [
          { required: true, message: '请输入Secret Key', trigger: 'blur', validator: this.validateTargetSecretKey }
        ],
        targetEndpoint: [
          { required: true, message: '请输入Endpoint', trigger: 'blur', validator: this.validateTargetEndpoint }
        ],
        scheduleType: [
          { required: true, message: '请选择调度类型', trigger: 'change' }
        ],
        scheduleCron: [
          { required: true, message: '请输入CRON表达式', trigger: 'blur', validator: this.validateScheduleCron }
        ]
      }
    }
  },
  computed: {
    // 重新定义计算属性，避免与data中的属性冲突
    taskList() {
      // 添加空值检查，避免访问未定义的属性
      return (this.$store.state.backups && this.$store.state.backups.tasks) || []
    },
    serverList() {
      // 添加空值检查，避免访问未定义的属性
      return (this.$store.state.servers && this.$store.state.servers.servers) || []
    },
    filteredTasks() {
      // 添加空值检查
      const tasks = this.taskList || []
      
      let result = tasks
      
      // 应用过滤条件
      if (this.filterForm.taskName) {
        result = result.filter(task => 
          task.taskName && task.taskName.toLowerCase().includes(this.filterForm.taskName.toLowerCase())
        )
      }
      
      if (this.filterForm.status) {
        result = result.filter(task => task.status === this.filterForm.status)
      }
      
      return result
    },
    paginatedTasks() {
      // 添加空值检查
      const tasks = this.filteredTasks || []
      
      // 应用分页
      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
      const end = start + this.pagination.pageSize
      return tasks.slice(start, end)
    }
  },
  async created() {
    await this.refreshTasks()
  },
  methods: {
    ...mapActions('backups', ['fetchTasks', 'createTask', 'updateTaskStatus', 'executeTask', 'deleteTask']),
    ...mapActions('servers', ['fetchServers']),
    validateTargetServer(rule, value, callback) {
      if (this.taskForm.targetType === 'SERVER' && !value) {
        callback(new Error('请选择目标服务器'))
      } else {
        callback()
      }
    },
    validateTargetBucket(rule, value, callback) {
      if (this.taskForm.targetType !== 'SERVER' && !value) {
        callback(new Error('请输入存储桶名称'))
      } else {
        callback()
      }
    },
    validateTargetAccessKey(rule, value, callback) {
      if (this.taskForm.targetType !== 'SERVER' && !value) {
        callback(new Error('请输入Access Key'))
      } else {
        callback()
      }
    },
    validateTargetSecretKey(rule, value, callback) {
      if (this.taskForm.targetType !== 'SERVER' && !value) {
        callback(new Error('请输入Secret Key'))
      } else {
        callback()
      }
    },
    validateTargetEndpoint(rule, value, callback) {
      if (this.taskForm.targetType !== 'SERVER' && !value) {
        callback(new Error('请输入Endpoint'))
      } else {
        callback()
      }
    },
    validateScheduleCron(rule, value, callback) {
      if (this.taskForm.scheduleType === 'CRON' && !value) {
        callback(new Error('请输入CRON表达式'))
      } else {
        callback()
      }
    },
    async refreshTasks() {
      this.loading = true
      try {
        await this.fetchTasks()
        await this.fetchServers()
      } catch (error) {
        console.error('刷新备份任务失败:', error)
        this.$message.error(error.message || '刷新失败')
      } finally {
        this.loading = false
      }
    },
    formatDateTime(datetime) {
      return datetime ? moment(datetime).format('YYYY-MM-DD HH:mm:ss') : ''
    },
    getStatusText(status) {
      const statusMap = {
        'PENDING': '待执行',
        'RUNNING': '执行中',
        'COMPLETED': '已完成',
        'FAILED': '失败'
      }
      return statusMap[status] || status
    },
    getStatusTagType(status) {
      const typeMap = {
        'PENDING': '',
        'RUNNING': 'primary',
        'COMPLETED': 'success',
        'FAILED': 'danger'
      }
      return typeMap[status] || ''
    },
    getProgressStatus(status) {
      const statusMap = {
        'COMPLETED': 'success',
        'FAILED': 'exception'
      }
      return statusMap[status]
    },
    getScheduleTypeText(type) {
      const typeMap = {
        'ONCE': '一次性',
        'DAILY': '每天',
        'WEEKLY': '每周',
        'MONTHLY': '每月',
        'CRON': '自定义'
      }
      return typeMap[type] || type
    },
    showCreateDialog() {
      this.dialogTitle = '创建备份任务'
      this.isEdit = false
      this.taskForm = {
        id: null,
        taskName: '',
        sourceServerId: null,
        sourceServerName: '',
        sourcePath: '',
        targetType: 'SERVER',
        targetServerId: null,
        targetServerName: '',
        targetPath: '',
        targetBucket: '',
        targetAccessKey: '',
        targetSecretKey: '',
        targetEndpoint: '',
        scheduleType: 'ONCE',
        scheduleCron: '',
        description: ''
      }
      this.dialogVisible = true
    },
    showDetails(task) {
      this.currentTask = { ...task }
      this.detailDialogVisible = true
    },
    handleSourceServerChange(serverId) {
      const server = this.serverList.find(s => s.id === serverId)
      if (server) {
        this.$set(this.taskForm, 'sourceServerName', server.name)
      }
    },
    handleTargetServerChange(serverId) {
      const server = this.serverList.find(s => s.id === serverId)
      if (server) {
        this.$set(this.taskForm, 'targetServerName', server.name)
      }
    },
    handleTargetTypeChange() {
      // 当目标类型改变时，清除相关字段的验证错误
      this.$nextTick(() => {
        if (this.$refs.taskForm) {
          this.$refs.taskForm.clearValidate([
            'targetServerId', 
            'targetBucket', 
            'targetAccessKey', 
            'targetSecretKey', 
            'targetEndpoint'
          ])
        }
      })
    },
    handleDialogClose() {
      this.$refs.taskForm.resetFields()
    },
    applyFilter() {
      this.pagination.currentPage = 1
    },
    resetFilter() {
      this.filterForm = {
        taskName: '',
        status: ''
      }
      this.pagination.currentPage = 1
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size
      this.pagination.currentPage = 1
    },
    handleCurrentChange(page) {
      this.pagination.currentPage = page
    },
    async handleSave() {
      this.$refs.taskForm.validate(async (valid) => {
        if (valid) {
          try {
            if (this.isEdit) {
              // 编辑功能暂时不实现
              this.$message.info('编辑功能暂未实现')
            } else {
              await this.createTask(this.taskForm)
              this.$message.success('备份任务创建成功')
              await this.refreshTasks()
            }
            this.dialogVisible = false
          } catch (error) {
            console.error('保存备份任务失败:', error)
            this.$message.error(error.message || '操作失败')
          }
        }
      })
    },
    async executeTask(task) {
      // 验证任务状态，只有待执行的任务才能执行
      if (task.status !== 'PENDING') {
        this.$message.warning('只有待执行的任务才能启动')
        return
      }
      
      // 验证源服务器是否存在
      if (!task.sourceServerId) {
        this.$message.warning('源服务器信息不完整')
        return
      }
      
      try {
        // 显示执行确认对话框
        await this.$confirm('确定要执行此备份任务吗？执行过程中请勿关闭页面。', '执行确认', {
          confirmButtonText: '确定执行',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        // 显示执行中提示
        const loading = this.$loading({
          lock: true,
          text: '正在启动备份任务...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        
        try {
          await this.executeTask(task.id)
          this.$message.success('备份任务已启动')
          // 刷新任务列表
          await this.refreshTasks()
        } finally {
          loading.close()
        }
      } catch (error) {
        if (error === 'cancel' || error === 'close') {
          // 用户取消操作
          this.$message.info('已取消执行')
        } else {
          console.error('执行备份任务失败:', error)
          this.$message.error(error.message || '执行失败')
        }
      }
    },
    async handleDelete(task) {
      this.$confirm('此操作将永久删除该备份任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await this.deleteTask(task.id)
          this.$message.success('删除成功')
          await this.refreshTasks()
        } catch (error) {
          console.error('删除备份任务失败:', error)
          this.$message.error(error.message || '删除失败')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style scoped>
.backups-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-left h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.task-count {
  font-size: 14px;
}

.header-right {
  display: flex;
  gap: 10px;
}

.filter-card {
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
}

.filter-content {
  padding: 20px 0;
}

.filter-form ::v-deep .el-form-item {
  margin-bottom: 0;
}

.backups-table {
  margin-bottom: 20px;
}

.backups-table ::v-deep .el-table__row:hover {
  background-color: #f5f7fa;
}

.progress-text {
  font-size: 12px;
  color: #606266;
  text-align: center;
  margin-top: 3px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.backup-dialog ::v-deep .el-dialog__body {
  padding: 20px;
}

.backup-form ::v-deep .el-form-item {
  margin-bottom: 20px;
}

.detail-dialog ::v-deep .el-dialog__body {
  padding: 20px;
}

.detail-form ::v-deep .el-form-item {
  margin-bottom: 15px;
}

.detail-form ::v-deep .el-form-item__label {
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .header-left {
    justify-content: center;
  }
  
  .header-right {
    justify-content: center;
  }
  
  .filter-content {
    padding: 15px 0;
  }
  
  .filter-form ::v-deep .el-form-item {
    margin-bottom: 15px;
    width: 100%;
  }
  
  .filter-form ::v-deep .el-form-item__content {
    width: 100%;
  }
  
  .filter-form ::v-deep .el-input,
  .filter-form ::v-deep .el-select {
    width: 100% !important;
  }
}
</style>